<template>
  <div id="voteDetail">
    <!-- 详情展示 -->
    <div class="detail-content">
      <div class="row">
        <strong>发布人：</strong>
        <p>{{votelDetail.publisher}}</p>
      </div>
      <div class="row">
        <strong>投票类型：</strong>
        <p v-if="votelDetail.genre == 0">单项表决</p>
        <p v-if="votelDetail.genre == 1">多选一表决</p>
        <p v-if="votelDetail.genre == 2">选举表决</p>
      </div>
      <div class="row">
        <strong>表决通过条件：</strong>
        <p v-if="votelDetail.vote_per == 0">双过半</p>
        <p v-if="votelDetail.vote_per == 1">双过三分之二</p>
      </div>
      <div class="row">
        <strong>是否延长投票时间：</strong>
        <p v-if="votelDetail.moretime == 0">不延长投票时间</p>
        <p v-if="votelDetail.moretime == 1">到期未达标自动延长1天</p>
        <p v-if="votelDetail.moretime == 2">到期未达标自动延长2天</p>
        <p v-if="votelDetail.moretime == 3">到期未达标自动延长3天</p>
      </div>
      <div class="row">
        <strong>弃权票是否计为多数票：</strong>
        <p v-if="votelDetail.w_m == 0">否</p>
        <p v-if="votelDetail.w_m == 1">是</p>
      </div>
      <div class="row">
        <strong>投票开始时间：</strong>
        <p>{{votelDetail.createtime}}</p>
      </div>
      <div class="row">
        <strong>投票结束时间：</strong>
        <p>{{votelDetail.endtime}}</p>
      </div>
      <div class="row" v-if="votelDetail.genre == 2">
        <strong>任职开始时间：</strong>
        <p>{{votelDetail.servingcreatetime}}</p>
      </div>
      <div class="row" v-if="votelDetail.genre == 2">
        <strong>任职结束时间：</strong>
        <p>{{votelDetail.servingendtime}}</p>
      </div>
      <div class="h1-wrap">
        <h1>{{votelDetail.title}}</h1>
      </div>
      <div class="row-content">
        <p>{{votelDetail.content}}</p>
      </div>

      <div class="row-img">
        <img
          :src="img"
          alt="i业主"
          v-for="(img,index) in votelDetail.images"
          :key="index"
          :preview="index"
          preview-text
        />
      </div>
      <div class="row" v-if="votelDetail.genre == 2">
        <p class="tip">以下候选人按报名时间顺序排序</p>
      </div>
    </div>
    <!-- 单选 -->
    <div class="return-wrap" v-if="genre == 0">
      <h2 class="vote-title">{{oneVoteList.m_id}}</h2>
      <div
        class="tip-block"
        v-if="oneVoteList.status != 0 && rid != 3 && rid != 6 && rid != 7 && rid != 8 && rid != 12&& rid != 13&& rid != 14&& rid != 15"
      >
        <span class="ag" v-if="oneVoteList.status== 1">您已投赞同票</span>
        <span class="not" v-if="oneVoteList.status== 2">您已投反对票</span>
        <span class="em" v-if="oneVoteList.status== 3">您已投弃权票</span>
      </div>
      <p class="now-tip">截止当前的实时投票情况</p>
      <div class="tip">
        <p>业主人数：</p>
        <div class="v-wrap">
          <span class="ag">赞成 {{oneVoteList.zc}}%</span>
          <span class="not">反对{{oneVoteList.fd}}%</span>
          <span class="em">弃权 {{oneVoteList.qu}}%</span>
          <span class="nt">未投 {{oneVoteList.wt}}%</span>
        </div>
      </div>
      <div class="tip">
        <p>专有面积：</p>
        <div class="v-wrap">
          <span class="ag">赞成 {{oneVoteList.zcmj}}%</span>
          <span class="not">反对{{oneVoteList.fdmj}}%</span>
          <span class="em">弃权 {{oneVoteList.qumj}}%</span>
          <span class="nt">未投 {{oneVoteList.wtmj}}%</span>
        </div>
      </div>
    </div>
    <div
      class="one-vote-item"
      v-if="genre == 0 && votelDetail.join == 0 &&  votelDetail.timeStatus == 1 && rid != 3 && rid != 6 && rid != 7 && rid != 8 && rid != 12&& rid != 13&& rid != 14&& rid != 15"
    >
      <div class="btn-block">
        <div class="btn" :class="oneVal == 3 ? 'on' : ''" @click="oneVotePlentry(3)">弃权</div>
        <div class="btn" :class="oneVal == 2 ? 'on' : ''" @click="oneVotePlentry(2)">反对</div>
        <div class="btn" :class="oneVal == 1 ? 'on' : ''" @click="oneVotePlentry(1)">赞成</div>
      </div>
      <div class="comfirn-btn">
        <md-button type="primary" size="small" round @click="showComfirn(0)">提交投票</md-button>
      </div>
    </div>
    <!-- 多选一 -->
    <div class="return-wrap" v-if="genre == 1">
      <p class="now-tip">截止当前的实时投票情况</p>
      <div v-for="(item,index) in votelDetail.ok" :key="index">
        <p class="op-title">
          {{item.m_id}}
          <span
            v-if="votelDetail.join ==1 && item.status == 1 && rid != 3 && rid != 6 && rid != 7 && rid != 8 && rid != 12&& rid != 13&& rid != 14&& rid != 15"
          >（您已选择该项）</span>
        </p>
        <div class="duoxuanyi-tip">
          <p>业主人数：<span class="ag">赞成 {{item.zc}}%</span></p>
          <p>专有面积：<span class="ag">赞成 {{item.zcmj}}%</span></p>
          <strong>截止当前尚未参与投票的业主权益</strong>
          <p>业主人数：<span class="nt">未投 {{item.wt}}%</span></p>
          <p>专有面积：<span class="nt">未投 {{item.wtmj}}%</span></p>
        </div>
      </div>
    </div>
    <div
      v-if="genre == 1 && votelDetail.join == 0 &&  votelDetail.timeStatus == 1 && rid != 3 && rid != 6 && rid != 7 && rid != 8 && rid != 12&& rid != 13&& rid != 14&& rid != 15"
    >
      <md-field title="投票选项" class="radio-field">
        <md-radio-list v-model="moreforoneVal" :options="votelDetail.moreforone" icon-size="lg" />
      </md-field>
      <div class="comfirn-btn">
        <md-button type="primary" size="small" round @click="showComfirn(1)">提交投票</md-button>
      </div>
    </div>
    <!-- 多选多投票 -->
    <div v-if="genre == 2">
      <div class="vote-item" v-for="(item,index) in votelDetail.pedataleList" :key="index">
        <div class="person-type" :class="item.genre == 0 ?  'one' : 'two'">
          <span v-if="item.genre == 0">业委会-参选人</span>
          <span v-if="item.genre == 1">监事会-参选人</span>
        </div>
        <div class="top">
          <div class="img-wrap">
            <img :src="item.img" alt />
          </div>
          <div class="info-wrap">
            <p>
              <span>产权人：</span>
              {{item.name}} {{item.sex}} {{item.age}}岁 {{item.professional}} {{item.political}}
            </p>
            <p>
              <span>参选人累计专有面积：</span>
              {{item.size}}平方米
            </p>
            <p>
              <span>工作单位：</span>
              {{item.work}}
            </p>
          </div>
        </div>
        <div class="bottom">
          <p>
            <span>所在行业：</span>
            {{item.industry}}
          </p>
          <p>
            <span>个人专长：</span>
            {{item.specialty}}
          </p>
          <p>
            <span>履职擅长：</span>
            {{item.wish}}
          </p>
          <p>
            <span>履职想法和建议：</span>
            {{item.advice}}
          </p>
        </div>
        <div class="tip-block">
          <p class="now-tip">截止当前的实时投票情况</p>
          <div class="tip">
            <p>业主人数：</p>
            <div class="v-wrap">
              <span class="ag">赞成 {{item.zc}}%</span>
              <span class="not">反对{{item.fd}}%</span>
              <span class="em">弃权 {{item.qu}}%</span>
              <span class="nt">未投 {{item.wt}}%</span>
            </div>
          </div>
          <div class="tip">
            <p>专有面积：</p>
            <div class="v-wrap">
              <span class="ag">赞成 {{item.zcmj}}%</span>
              <span class="not">反对{{item.fdmj}}%</span>
              <span class="em">弃权 {{item.qumj}}%</span>
              <span class="nt">未投 {{item.wtmj}}%</span>
            </div>
          </div>
        </div>
        <div
          class="tip-block-wrap"
          v-if="votelDetail.join ==1 && item.status != 0 && rid != 3 && rid != 6 && rid != 7 && rid != 8 && rid != 12&& rid != 13&& rid != 14&& rid != 15"
        >
          <span class="ag" v-if="item.status== 1">您已投赞同票</span>
          <span class="not" v-if="item.status== 2">您已投反对票</span>
          <span class="em" v-if="item.status== 3">您已投弃权票</span>
        </div>
        <div class="btn-block" v-if="votelDetail.timeStatus == 1  && votelDetail.join == 0">
          <div class="btn" :class="item.checked == 3 ? 'on' : ''" @click="votePlentry(index,3)">弃权</div>
          <div class="btn" :class="item.checked == 2 ? 'on' : ''" @click="votePlentry(index,2)">反对</div>
          <div class="btn" :class="item.checked == 1 ? 'on' : ''" @click="votePlentry(index,1)">赞成</div>
        </div>
      </div>
      <div
        class="comfirn-btn"
        v-if="votelDetail.timeStatus == 1  && votelDetail.join == 0 && rid != 3 && rid != 6 && rid != 7 && rid != 8 && rid != 12&& rid != 13&& rid != 14&& rid != 15"
      >
        <md-button type="primary" size="small" round @click="showComfirn(2)">提交投票</md-button>
      </div>
    </div>
    <!-- 验证密码 -->
    <div class="verify-vote-layer" v-if="showVoteLayer">
      <p class="error-text" v-if="isErrorText">{{errorText}}</p>
      <div class="inner-content">
        <h3>请验证您的密码</h3>
        <p class="tip">{{firstPassword}}~是您的密码首字母</p>
        <div class="sel-items">
          <input type="password" v-model="passwordValue" placeholder="请输入您的密码" />
        </div>
        <p class="modify-password">
          <span @click="nvaModifyPassword">忘记密码？</span>
        </p>
        <div class="btn-block">
          <div class="cancel" @click="showVoteLayer = false">取消</div>
          <div class="confirm" @click="confirmVote">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon, Button, Toast } from "mand-mobile";
import https from "@/https";
import config from "@/config";
export default {
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button
  },

  name: "voteDetail",
  data() {
    return {
      rid: 0, //
      genre: 0, //
      votelDetail: {}, //单项，多选一 多选多投票列表。多选多内容
      oneVoteList: {}, //单项投票信息

      moreforoneVal: "",
      oneVal: 0, //
      ip_add: "",

      showVoteLayer: false, // 投票验证框
      firstPassword: "", //密码首字
      isErrorText: false, //密码验证错误弹窗
      errorText: "密码输入有误", //错误文本
      passwordValue: "" //验证密码
    };
  },

  methods: {
    compare(property) {
      return function(a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
      };
    },
    // 获取列表
    getVoteDetails() {
      let genre = this.genre;
      if (genre == 2) {
        let params = {
          bid: this.$route.query.bid,
          tid: this.$store.state.userInfo.id,
          qid: this.$store.state.residentialType.qid,
          signup_id: this.$route.query.signup_id
        };
        https
          .fetchPost(config.getVoteDetails, params)
          .then(res => {
            // console.log(res.data);
            if (res.data.code == 1) {
              res.data.data.parameter.number = res.data.data.votelList.number;
              let votelDetail = Object.assign(
                res.data.data.parameter,
                res.data.data.votelList
              );
              votelDetail.pedataleList = votelDetail.pedataleList.sort(
                this.compare("genre")
              );
              if (votelDetail.images != "") {
                let str = votelDetail.images.substr(
                  0,
                  votelDetail.images.length - 1
                );
                let imgs = str.split(";");
                let arr = [];
                imgs.forEach(item => {
                  if (item != "") {
                    let str = "https://mz.sqyzdh.com" + item;
                    arr.push(str);
                  }
                });
                votelDetail.images = arr;
                this.$previewRefresh();
              }

              let timeNow = new Date().getTime();
              let timeStatus = 0;
              let yanTime = 3 * 24 * 60 * 60 * 1000;
              if (votelDetail.createtime * 1000 > timeNow) {
                timeStatus = 0; //未开始投票
              } else if (
                votelDetail.createtime * 1000 < timeNow &&
                votelDetail.endtime * 1000 + yanTime > timeNow
              ) {
                timeStatus = 1; //投票进行中
              } else if (votelDetail.endtime * 1000 + yanTime < timeNow) {
                timeStatus = 2; //投票已经结束
              }
              votelDetail.timeStatus = timeStatus;
              votelDetail.createtime = this.dataFormat(
                votelDetail.createtime * 1000,
                1
              );
              votelDetail.endtime = this.dataFormat(
                votelDetail.endtime * 1000,
                1
              );
              votelDetail.servingcreatetime = this.dataFormat(
                votelDetail.servingcreatetime * 1000,
                1
              );
              votelDetail.servingendtime = this.dataFormat(
                votelDetail.servingendtime * 1000,
                1
              );
              votelDetail.pedataleList.forEach(item => {
                item.checked = 0;
              });
              this.votelDetail = votelDetail;
            } else {
              Toast.failed(res.data.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        let params = {
          bid: this.$route.query.bid,
          user_id: this.$store.state.userInfo.id
        };
        https
          .fetchPost(config.getBallotDetails, params)
          .then(res => {
            if (res.data.code == 1) {
              let votelDetail = res.data.data.votelList;
              if (votelDetail.images != "") {
                let str = votelDetail.images.substr(
                  0,
                  votelDetail.images.length - 1
                );
                let imgs = str.split(";");
                let arr = [];
                imgs.forEach(item => {
                  if (item != "") {
                    let str = "https://mz.sqyzdh.com" + item;
                    arr.push(str);
                  }
                });
                votelDetail.images = arr;
                this.$previewRefresh();
              }
              let arr1 = [];
              votelDetail.ok.forEach(item => {
                let obj = {
                  value: item.id,
                  text: item.m_id
                };
                arr1.push(obj);
              });

              votelDetail.moreforone = arr1;
              let timeNow = new Date().getTime();
              let timeStatus = 0;
              let yanTime = 3 * 24 * 60 * 60 * 1000;
              if (votelDetail.createtime * 1000 > timeNow) {
                timeStatus = 0; //未开始投票
              } else if (
                votelDetail.createtime * 1000 < timeNow &&
                votelDetail.endtime * 1000 + yanTime > timeNow
              ) {
                timeStatus = 1; //投票进行中
              } else if (votelDetail.endtime * 1000 + yanTime < timeNow) {
                timeStatus = 2; //投票已经结束
              }
              votelDetail.timeStatus = timeStatus;
              votelDetail.createtime = this.dataFormat(
                votelDetail.createtime * 1000,
                1
              );
              votelDetail.endtime = this.dataFormat(
                votelDetail.endtime * 1000,
                1
              );
              this.votelDetail = votelDetail;
              if (genre == 0) {
                this.oneVoteList = votelDetail.ok[0];
              }
            } else {
              Toast.failed(res.data.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    // 赞成
    votePlentry(index, type) {
      this.votelDetail.pedataleList[index].checked = type;
    },
    oneVotePlentry(type) {
      this.oneVal = type;
    },
    //
    showComfirn(index) {
      if (index == 0) {
        let oneVal = this.oneVal;
        if (oneVal == 0) {
          Toast.failed("请选择选项");
          return;
        }
      } else if (index == 1) {
        let moreforoneVal = this.moreforoneVal;
        if (moreforoneVal == "") {
          Toast.failed("请选择选项");
          return;
        }
      } else if (index == 2) {
        let pedataleList = this.votelDetail.pedataleList;
        let empty = false;
        pedataleList.forEach(item => {
          if (item.checked == 0) {
            empty = true;
            return false;
          }
        });
        if (empty) {
          Toast.failed("请选择完所有对象");
          return;
        }
      }

      this.firstPassword = this.$store.state.userInfo.acronym_password;
      this.showVoteLayer = true;
      this.passwordValue = "";
    },
    // 提交投票信息
    confirmVote() {
      let password = this.passwordValue;
      if (password == "") {
        Toast.failed("请输入密码");
        return;
      }
      let genre = this.genre;
      let url = "";
      let params = {};
      if (genre == 0) {
        params = {
          password,
          user_id: this.$store.state.userInfo.id,
          type: this.oneVal,
          qid: this.$store.state.residentialType.qid,
          size: "",
          did: this.votelDetail.ok[0].id,
          ip_add: this.ip_add
        };
        url = config.addVoteDuoxuan;
      } else if (genre == 1) {
        params = {
          password,
          user_id: this.$store.state.userInfo.id,
          type: 1,
          qid: this.$store.state.residentialType.qid,
          size: "",
          did: this.moreforoneVal,
          ip_add: this.ip_add
        };
        url = config.addVoteDuoxuan;
      } else if (genre == 2) {
        let pedataleList = this.votelDetail.pedataleList;
        let meas = [];
        pedataleList.forEach(item => {
          let obj = {
            qid: this.$store.state.residentialType.qid, //小区ID
            size: item.size, //面积
            type: item.checked, //状态
            uid: item.uid, //业主ID
            number: this.votelDetail.number, //表决编号
            lid: item.lid, //履历ID
            ip_add: this.ip_add
          };
          meas.push(obj);
        });
        params = {
          password,
          user_id: this.$store.state.userInfo.id,
          meas
        };
        url = config.addVote;
      }
      https
        .fetchPost(url, params)
        .then(res => {
          console.log(res.data);
          if (res.data.code == 1) {
            Toast.succeed(res.data.msg);
            this.showVoteLayer = false;
            this.getVoteDetails();
          } else {
            this.isErrorText = true;
            this.errorText = res.data.msg;
            setTimeout(() => {
              this.isErrorText = false;
            }, 2500);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    nvaModifyPassword() {
      this.$router.push({
        path: "/modifyPassword"
      });
    },
    // 时间戳转换
    dataFormat(num, type) {
      var dd = new Date(num);
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;
      var d = dd.getDate();
      var h = dd.getHours();
      var i = dd.getMinutes();
      var s = dd.getSeconds();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      i = i < 10 ? "0" + i : i;
      s = s < 10 ? "0" + s : s;
      if (type == 1) {
        return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;
      } else {
        return y + "-" + m + "-" + d + " " + h + ":" + i;
      }
    }
  },
  created() {
    this.genre = this.$route.query.genre;
    this.rid = this.$store.state.roleType.rid;
    this.getVoteDetails();
  },
  mounted() {
    let ip = returnCitySN["cip"];
    this.ip_add = ip;
  }
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
body {
  background: #f2f2f2;
}
.md-notice-bar {
  z-index: 1;
}
button {
  z-index: 1;
}
.pswp {
  z-index: 99999;
}
#voteDetail {
  overflow: auto;
  display: flex;
  flex-direction: column;
  z-index: 1;
  background: #f2f2f2;

  padding-top: 20px;
  .now-tip {
    margin-bottom: 30px;
    margin-top: 20px;
    font-size: 24px;
    color: #e22c1f;
    text-align: center;
  }
  .detail-content {
    display: flex;
    flex-direction: column;
    padding: 20px 30px;
    margin-bottom: 20px;
    background: #fff;

    .h1-wrap {
      display: flex;
      justify-content: center;
      margin-top: 30px;

      h1 {
        font-size: 32px;
        font-weight: 600;
        line-height: 50px;
        display: block;
        padding-bottom: 25px;
      }
    }

    .row-content {
      text-align: center;
      padding-top: 20px;
      font-size: 26px;
      color: #666;
      line-height: 40px;
      padding-right: 10px;
      margin-bottom: 20px;
      border-top: 1px dashed #ccc;
    }
    .row {
      display: flex;
      align-items: center;
      font-size: 26px;
      color: #666;
      line-height: 40px;
      padding-right: 10px;
      margin-bottom: 10px;
      strong {
        display: flex;
        align-items: center;
        position: relative;
        font-size: 30px;
        height: 50px;
        color: #444;
        font-weight: 600;
        &::before {
          content: "";
          display: block;
          height: 35px;
          border-left: 6px solid $themeGold;
          margin-right: 20px;
        }
      }
      .tip {
        color: #999;
        margin-top: 10px;
        font-size: 24px;
      }
    }
    .row-img {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;
      .tip {
        font-size: 24px;
        color: #e22c1f;
        width: 600px;
      }
      img {
        display: block;
        width: 600px;
        margin: 10px auto 15px;
        border-radius: 12px;
        border: 1px solid #f2f2f2;
      }
    }
  }
  .vote-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    background: #fff;
    padding: 20px 30px;
    .person-type {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      height: 80px;
      margin-bottom: 20px;
      color: #444;
      font-weight: 600;
      border-radius: 10px;
      &.one {
        background: #7dc5eb;
      }
      &.two {
        background: #f4dbe1;
      }
    }
    .top {
      display: flex;
      // align-items: center;
      font-size: 26px;
      border-bottom: 1px dashed #ccc;
      padding-bottom: 20px;
      .img-wrap {
        display: flex;
        justify-content: center;
        width: 150px;
        height: 150px;
        overflow: hidden;
        border-radius: 14px;
        img {
          height: 150px;
        }
      }
      .info-wrap {
        width: 560px;
        padding-left: 20px;
        p {
          line-height: 38px;
          color: #555;
          margin-top: 10px;
          span {
            font-size: 28px;
            color: #2f86f6;
          }
        }
      }
    }
    .bottom {
      padding-top: 10px;
      p {
        font-size: 26px;
        color: #444;
        line-height: 38px;
        margin-bottom: 10px;
        span {
          font-size: 26px;
          color: #2f86f6;
        }
      }
    }
    .btn-block {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #c5cad5;
        width: 170px;
        height: 56px;
        border-radius: 50px;
        font-size: 28px;
        margin: 0 20px;
        color: #444;
        background: #fff;
        &.on {
          background: #2f86f6;
          border: 1px solid #2f86f6;
          color: #fff;
        }
      }
    }
    .tip-block {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: #999;
      margin-top: 15px;
      .tip {
        display: flex;
        align-items: center;
        flex-direction: column;
        font-size: 26px;
        color: #444;
        margin-bottom: 15px;
        p {
          padding: 20px 0;
          font-size: 28px;
          color: #444;
          text-align: center;
          font-weight: 600;
        }
        span {
          font-size: 24px;
          margin-right: 10px;
          &.ag {
            color: #2f86f6;
          }
          &.not {
            color: rgb(226, 11, 11);
          }
          &.em {
            color: #999;
          }
        }
      }
    }
    .tip-block-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: #999;
      margin-top: 20px;
      padding: 10px 0 20px;
      span {
        font-size: 24px;
        margin-right: 10px;
        &.ag {
          color: #2f86f6;
        }
        &.not {
          color: rgb(226, 11, 11);
        }
        &.em {
          color: #999;
        }
      }
    }
  }
  .one-vote-item {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 20px 30px;
    .btn-block {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      margin-bottom: 20px;
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #c5cad5;
        width: 170px;
        height: 56px;
        border-radius: 50px;
        font-size: 28px;
        margin: 0 20px;
        color: #444;
        background: #fff;
        &.on {
          background: #2f86f6;
          border: 1px solid #2f86f6;
          color: #fff;
        }
      }
    }
    .tip-block {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      margin-top: 20px;
      height: 50px;
      color: #999;
      span {
        &.ag {
          color: #2f86f6;
        }
        &.not {
          color: rgb(226, 11, 11);
        }
        &.em {
          color: #999;
        }
      }
    }
  }
  .return-wrap {
    background: #fff;
    padding: 15px 0 80px;
    .duoxuanyi-tip {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #444;
      font-size: 28px;
      p {
        margin: 10px 0;
      }
      .ag {
        color: #2f86f6;
        line-height: 40px;
      }
      strong {
        color: rgb(226, 11, 11);
        font-weight: normal;
        text-align: center;
        margin: 20px 0;
      }
      .nt {
        color: #666;
        line-height: 40px;
      }
    }
    .vote-title {
      text-align: center;
      font-size: 36px;
      line-height: 100px;
    }
    .op-title {
      display: flex;
      align-items: center;
      font-size: 30px;
      color: #444;
      line-height: 50px;
      padding-left: 30px;
      margin-top: 20px;
      span {
        color: #e22c1f;
      }
      &::before {
        content: "";
        display: block;
        height: 35px;
        border-left: 6px solid $themeGold;
        margin-right: 20px;
      }
    }
    .tip-block {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      margin: 20px 0;
      height: 50px;
      color: #999;
      span {
        &.ag {
          color: #2f86f6;
        }
        &.not {
          color: rgb(226, 11, 11);
        }
        &.em {
          color: #999;
        }
      }
    }
    .duo-item {
      padding-bottom: 40px;
      border-bottom: 15px solid #f2f2f2;
    }
    .tip {
      display: flex;
      flex-direction: column;
      // margin-top: 10px;
      margin-bottom: 20px;

      p {
        padding: 20px 50px;
        font-size: 28px;
        color: #444;
        text-align: center;
        font-weight: 600;
      }
      .v-wrap {
        display: flex;
        justify-content: center;
        font-size: 28px;
        span {
          margin: 0 10px;
          &.ag {
            color: #2f86f6;
          }
          &.not {
            color: rgb(226, 11, 11);
          }
          &.em {
            color: #999;
          }
          &.nt {
            color: rgb(52, 54, 54);
          }
        }
      }
    }
  }
  //  <!-- 验证密码 -->
  .verify-vote-layer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 990 !important;
    background: rgba(0, 0, 0, 0.6);
    .error-text {
      position: absolute;
      top: 0;
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-size: 26px;
      color: #fff;
      text-align: center;
      background: #e22c1f;
    }
    .inner-content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      width: 560px;
      border-radius: 12px;
      padding: 30px 30px 0;
      h3 {
        display: flex;
        justify-content: center;
        font-size: 32px;
        color: #333;
        padding-bottom: 50px;
        padding-top: 20px;
      }
      .tip {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26px;
        height: 60px;
        width: 350px;
        padding: 0 30px;
        color: rgb(226, 11, 11);
      }
      .sel-items {
        display: flex;
        justify-content: center;
        input {
          border: none;
          outline: none;
          width: 350px;
          height: 60px;
          font-size: 30px;
          color: #444;
          background: #f9f9f9;
          padding: 0 20px;
        }
      }
      .modify-password {
        text-align: right;
        color: #2f86f6;
        font-size: 24px;
        padding: 30px 0;
        span {
          padding: 10px;
        }
      }
      .btn-block {
        display: flex;
        border-top: 1px solid #f1f1f1;

        div {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50%;
          height: 100px;
          color: #2f86f6;
          font-size: 30px;
          &.cancel {
            color: #999;
            position: relative;
            &::after {
              content: "";
              position: absolute;
              top: 20px;
              right: 0;
              width: 1px;
              height: 60px;
              background: #f2f2f2;
            }
          }
        }
      }
    }
  }
  .comfirn-btn {
    padding: 40px 240px 80px;
  }
}
</style>
